<template>
  <div class="Form">
    <m-title>编辑Form</m-title>
    <m-form ref="MForm" class="mForm" :model="formData">
      <m-form-item
        label="输入框"
        prop="MInput"
        :rules="[{ required: true, message: '请输入内容' }]"
      >
        <span slot="label">
          输入框
          <m-tooltip class="item" content="Top Center 提示文字">
            <i class="el-icon-warning"></i>
          </m-tooltip>
        </span>
        <m-input v-model="formData.MInput"></m-input>
      </m-form-item>
      <m-form-item
        label="输入框"
        prop="MInput"
        :rules="[{ required: true, message: '请输入内容' }]"
      >
        <m-input v-model="formData.MInput">
          <template slot="append">单位kw·h</template>
        </m-input>
      </m-form-item>
      <m-form-item
        label="手机输入框"
        prop="MobilePhone"
        :rules="[{ validator: $validator.form.isMobilePhone }]"
      >
        <m-input v-model="formData.MobilePhone">
          <el-button slot="append" icon="el-icon-mobile"></el-button>
        </m-input>
      </m-form-item>
      <m-form-item
        label="邮箱地址"
        prop="Email"
        :rules="[{ validator: $validator.form.isEmail }]"
      >
        <m-input v-model="formData.Email">
          <el-button slot="append" icon="el-icon-message"></el-button>
        </m-input>
      </m-form-item>
      <m-form-item
        label="密码"
        prop="Password"
        :rules="[{ validator: $validator.form.isStrongPassword }]"
      >
        <m-input
          v-model="formData.Password"
          maxLength="16"
          :show-password="true"
        ></m-input>
      </m-form-item>
      <m-form-item
        label="文本域"
        prop="Textarea"
        :rules="[{ required: true, message: '请输入内容' }]"
      >
        <m-input v-model="formData.Textarea" type="textarea"></m-input>
      </m-form-item>
      <m-form-item label="数字输入框" prop="MInput">
        <m-input-number v-model="formData.MInputNumber"></m-input-number>
      </m-form-item>
      <m-form-item label="下拉框" prop="MInput">
        <m-select v-model="formData.MSelect" placeholder="请选择">
          <m-option
            v-for="item in MSelect.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </m-option>
        </m-select>
      </m-form-item>
      <m-row>
        <m-form-item label="树形下拉框">
          <m-col :span="19">
            <m-tree-select
              v-model="formData.MTreeSelect"
              :multiple="MTreeSelect.multiple"
              :options="MTreeSelect.options"
            >
            </m-tree-select>
          </m-col>
          <m-col :span="4">
            <m-button
              type="primary"
              @click="MTreeSelect.multiple = !MTreeSelect.multiple"
              >{{ MTreeSelect.multiple ? "多选" : "单选" }}</m-button
            >
          </m-col>
        </m-form-item>
      </m-row>
      <m-form-item label="单选框">
        <el-radio-group v-model="formData.MRadio">
          <el-radio :label="3">备选项</el-radio>
          <el-radio :label="6">备选项</el-radio>
          <el-radio :label="9">备选项</el-radio>
        </el-radio-group>
      </m-form-item>
      <m-form-item label="多选框组">
        <m-checkbox-group v-model="formData.MCheckboxGroup">
          <m-checkbox
            v-for="city in MCheckboxGroup.cities"
            :label="city"
            :key="city"
            >{{ city }}</m-checkbox
          >
        </m-checkbox-group>
      </m-form-item>
      <m-form-item label="多选框">
        <m-checkbox v-model="formData.MCheckbox"></m-checkbox>
      </m-form-item>
      <m-form-item label="日期选择器">
        <m-date-picker
          type="date"
          v-model="formData.MDatePicker"
        ></m-date-picker>
      </m-form-item>
      <m-row>
        <m-form-item label="时间选择器">
          <m-col :span="12">
            <m-time-picker v-model="formData.MTimePicker"></m-time-picker>
          </m-col>
          <m-col :span="12">
            <m-time-select
              v-model="formData.MTimeSelect"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
              }"
            ></m-time-select>
          </m-col>
        </m-form-item>
      </m-row>
      <m-form-item label="日期时间选择器">
        <m-date-picker
          type="datetime"
          v-model="formData.MDateTimePicker"
        ></m-date-picker>
      </m-form-item>
      <!--      <m-form-item label="时间下拉" >-->
      <!--        <m-date-picker v-model="formData.MTimePicker">备选项</m-date-picker>-->
      <!--      </m-form-item>-->
      <m-form-item>
        <m-button type="primary" @click="saveForm">保存</m-button>
        <m-button>取消</m-button>
      </m-form-item>
    </m-form>
  </div>
</template>

<script>
export default {
  name: "DemoForm",
  data() {
    return {
      formData: {
        MInput: null,
        MobilePhone: null,
        Email: null,
        Password: null,
        Textarea: null,
        MInputNumber: null,
        MSelect: null,
        MTreeSelect: null,
        MRadio: 3,
        MCheckboxGroup: ["上海", "北京"],
        MCheckbox: true,
        MDatePicker: "",
        MTimePicker: "",
        MTimeSelect: "",
        MDateTimePicker: "",
      },
      MSelect: {
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
      },
      MTreeSelect: {
        multiple: false,
        options: [
          {
            id: "a",
            label: "a",
            children: [
              {
                id: "aa",
                label: "aa",
              },
              {
                id: "ab",
                label: "ab",
              },
            ],
          },
          {
            id: "b",
            label: "b",
          },
          {
            id: "c",
            label: "c",
          },
        ],
      },
      MCheckboxGroup: {
        cities: ["上海", "北京", "广州", "深圳"],
      },
    };
  },
  components: {},
  mounted() {},
  methods: {
    saveForm() {
      this.$refs["MForm"].validate((valid) => {
        if (valid) {
          this.$m.message("submit!", "success");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MUI/style/var.scss";
.Form {
}
.mForm {
  width: $formWidth;
  margin: 0 auto;
}
</style>
